<template>
  <screenWrap class="container">
    <!-- 时间 -->
    <div class="time-content">
      <span>{{ date }}</span>:
      <span>{{ time }}</span>
    </div>
    <!-- 标题 -->
    <div class="title-content">
      <div class="title" />
      <div class="title-bottom">
        <img src="./assets/title.png" alt="" class="title-wenzi">
        <div class="select-date-box">
            <SelectYear @getYear="getYear" :yearOptions="yearOptions" :defaultYear="defaultYear" />
        </div>
      </div>
    </div>
    <!-- 产业概况 -->
    <div class="platfrom-content">
      <platformInfo @backVillage="backVillage" :selectYear="selectYear" :defaultYear="defaultYear" />
    </div>
     <!-- 每日价格播报 -->
    <div class="price-content">
      <everydayPriceMsg />
    </div>
     <!-- 基地摄像头 -->
    <div class="video-content">
      <videos @getVideoNums="getVideoNums" />
    </div>
    <!-- 果树资源数字化情况 -->
    <div class="fruiter-content">
      <fruiterDig @getMapPonit="getMapPonit"  />
    </div>
    <!-- 企业选择 -->
    <div class="select-company">
        <chooseCompany :companyList="companyMarker" />
    </div>
    <!-- 左边部分 -->
    <div class="left-content">
      <equipment :equipmentVideoNum="equipmentVideoNum" />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <categoryRant />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <totalOutput @getShow="getShow" :canShow1="canShow1" :canShow2="canShow2" />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <avSellingPrice @getShow1="getShow1" :canShow="canShow" :canShow2="canShow2" />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <farmingDo @getShow2="getShow2" :canShow="canShow" :canShow1="canShow1" />
    </div>
    <!-- 右边部分 -->
    <div class="right-content">
      <onlineSupply />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <hotRank />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <turnover />
      <img src="./assets/h-line.png" alt="" style="width:360px;height:1px">
      <loquatCulture />
    </div>
  <!-- 天地图 -->
    <div id="mapDiv" :style="{ height: '100%', width: '100%' ,zIndex:22}" ref="mapDiv" class="darkMode" />
  </screenWrap>
</template>
<!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=c494b08abe12337f37b9e707363fed10"></script> -->
<script>
import {queryPlanYeardp ,querySubjectCoordinateListdp,queryOrchardCoordinateListdp,queryPlanListByeardp,getDataScreenToken} from '@/api/dashboards'
import screenWrap from './components/screenWrap.vue'
import Number from './components/numbers.vue'
import SelectYear from './components/SelectYear.vue'
import categoryRant from './components/left/categoryRant.vue'
import totalOutput from './components/left/totalOutput.vue'
import avSellingPrice from './components/left/avSellingPrice.vue'
import farmingDo from './components/left/farmingDo.vue'
import onlineSupply from './components/right/onlineSupply.vue'
import hotRank from './components/right/hotRank.vue'
import turnover from './components/right/turnover.vue'
import loquatCulture from './components/right/loquatCulture.vue'
import chooseCompany from './components/chooseCompany.vue'
import platformInfo from './components/platformInfo.vue'
import fruiterDig from './components/fruiterDig.vue'
import videos from './components/video.vue'
import equipment from './components/left/equipment'
import everydayPriceMsg from './components/everydayPriceMsg.vue'
export default {
      components:{
        screenWrap,
        Number,
        SelectYear,
        categoryRant,
        totalOutput,
        avSellingPrice,
        farmingDo,
        onlineSupply,
        hotRank,
        turnover,
        loquatCulture,
        chooseCompany,
        platformInfo,
        fruiterDig,
        videos,
        equipment,
        everydayPriceMsg
      },
      data () {
          return{
            equipmentVideoNum:0,
            selectYear:undefined,
            defaultYear:undefined,
            timeTicket: null,
            timeTicket1: null,
            imgTime: null,
            imgIndex:0,
            map:null,
            canShow:undefined,
            canShow1:undefined,
            canShow2:undefined,
            date:'',
            time:'',
            options: [],
            villageMarker:[],
            gardenMarker:[],
            companyMarker:[],
          }
      },
      created(){
        this.currentTime()
        window.open_dialog = (id) => {
          this.getDataScreenToken(id)
        }
      },
      mounted(){
        this.GetMaps()
        this.querySubjectCoordinateListdp()
        this.queryPlanYeardp().then(()=>{
           this.queryPlanListByeardp(this.defaultYear)
        })
      },
      beforeDestroy() {
        if (this.formatDate) {
           clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
        }
      },
      methods: {
        getVideoNums(val){
          this.equipmentVideoNum = val
        },
        async getDataScreenToken(subjectId) { //获取耘田token
            let res = await getDataScreenToken({subjectId:subjectId})
            if(res.success){
              window.open(`http://8.140.154.124:10203/ssoLogin?type=2&token=${res.result.token}&accountId=${res.result.accountId}`)
            }else {
              this.$message.warning(res.message)
            }
        },
        async queryPlanYeardp() { // 获取有数据的年份
            let res = await queryPlanYeardp()
            this.yearOptions = res.result&&res.result.length&&res.result
            this.yearOptions.map(item=>{
              item.label =item.year
              item.value = item.year
            })
            this.defaultYear = this.yearOptions&&this.yearOptions.length&&this.yearOptions[0].value
           
        },
        async querySubjectCoordinateListdp() { // 企业坐标分布
            let res = await querySubjectCoordinateListdp()
            const list = res.result&&res.result.length&&res.result
            list.map(item=>{
              const obj = {}
              obj.principalName = item.principalName&&item.principalName
              obj.id = item.id
              if(item.subjectInfoCardVo){
                obj.latitude = item.latitude
                obj.longitude = item.longitude
                obj.totalArea = item.subjectInfoCardVo.totalArea&&item.subjectInfoCardVo.principalName
                obj.totalArea = item.subjectInfoCardVo.totalArea&&item.subjectInfoCardVo.totalArea||0
                obj.orchardNum = item.subjectInfoCardVo.orchardNum&&item.subjectInfoCardVo.orchardNum||0
                obj.variety = item.subjectInfoCardVo.variety&&item.subjectInfoCardVo.variety||''
                if(item.subjectInfoCardVo.mainPicture){
                  obj.mainPicture = `${window._CONFIG['domainName']}/${item.subjectInfoCardVo.mainPicture}`
                }
                item.subjectInfoCardVo.contactNumber = item.subjectInfoCardVo.contactNumber&&item.subjectInfoCardVo.contactNumber.replace(/\B(?=(?:\d{4})+$)/g, '-')
                if(item.subjectInfoCardVo.contacts&&item.subjectInfoCardVo.contacts&&item.subjectInfoCardVo.contactNumber&&item.subjectInfoCardVo.contactNumber){
                  obj.contacts = `${item.subjectInfoCardVo.contacts}(${item.subjectInfoCardVo.contactNumber})`
                }else if(item.subjectInfoCardVo.contacts&&!item.subjectInfoCardVo.contactNumber){
                  obj.contacts = `${item.subjectInfoCardVo.contacts}`
                }else if(!item.subjectInfoCardVo.contacts&&!item.subjectInfoCardVo.contactNumber){
                  obj.contacts ='暂无'
                }
                if(item.subjectInfoCardVo.txppQualificationsList&&item.subjectInfoCardVo.txppQualificationsList.length){
                  const img = []
                  item.subjectInfoCardVo.txppQualificationsList.map(i=>{
                    img.push(i.certificatePicture)
                  })
                  obj.imgList = img.map(item=>{
                    return `${window._CONFIG['domainName']}/${item}`
                  })
                }
              }
              this.companyMarker.push(obj)
            })
        },
        async queryOrchardCoordinateListdp() { // 果园坐标分布
            let res = await queryOrchardCoordinateListdp()
            const arr = res.result&&res.result.length&&res.result
            arr.map(j=>{
              const obj = {}
              obj.latitude = j.latitude
              obj.longitude = j.longitude
              obj.orchardName = j.orchardName
              obj.id = j.id
              if(j.orchardInfoCardVo){
                 obj.totalArea = j.orchardInfoCardVo.totalArea&&j.orchardInfoCardVo.totalArea
                 obj.variety = j.orchardInfoCardVo.variety&&j.orchardInfoCardVo.variety
                 obj.subjectName = j.orchardInfoCardVo.subjectName&&j.orchardInfoCardVo.subjectName
                 obj.principal = j.orchardInfoCardVo.principal&&j.orchardInfoCardVo.principal
                 obj.qrcodeUrl = j.orchardInfoCardVo.qrcodeUrl&&j.orchardInfoCardVo.qrcodeUrl
                 obj.phone = j.phone&&j.phone
                 j.orchardInfoCardVo.phone  = j.orchardInfoCardVo.phone&&j.orchardInfoCardVo.phone.replace(/\B(?=(?:\d{4})+$)/g, '-')
                if(j.orchardInfoCardVo.principal&&j.orchardInfoCardVo.principal&&j.orchardInfoCardVo.phone&&j.orchardInfoCardVo.phone){
                  obj.principal = `${j.orchardInfoCardVo.principal}(${j.orchardInfoCardVo.phone})`
                }else if(j.orchardInfoCardVo.principal&&!j.orchardInfoCardVo.phone){
                  obj.principal = `${j.orchardInfoCardVo.principal}`
                }else if(!j.orchardInfoCardVo.principal&&j.orchardInfoCardVo.phone){
                  obj.principal =`${j.orchardInfoCardVo.phone}`
                }else if(!j.orchardInfoCardVo.principal&&!j.orchardInfoCardVo.phone){
                  obj.principal ='暂无'
                }
              }
             this.gardenMarker.push(obj)
            })
        },
        async queryPlanListByeardp(val) { // 村坐标分布
            let res = await queryPlanListByeardp({year:val})
            this.villageMarker = res.result&&res.result.length&&res.result
            this.GetMaps()
        },
        getShow(val){
          this.canShow = val
          if(val = true){
            this.canShow1 = false
            this.canShow2 = false
          }
        },
        getShow1(val){
          this.canShow1 = val
          if(val = true){
            this.canShow = false
            this.canShow2 = false
          }
        },
        getShow2(val){
          this.canShow2 = val
          if(val = true){
            this.canShow = false
            this.canShow1 = false
          }
        },
        currentTime() {
            setInterval(this.formatDate, 1000)
        },
        formatDate() {
            const date = new Date()
            const year = date.getFullYear() // 年
            const month = date.getMonth() + 1 // 月
            const day = date.getDate() // 日
            let hour = date.getHours() // 时
            hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
            let minute = date.getMinutes() // 分
            minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
            let second = date.getSeconds() // 秒
            second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
            this.time = `${hour}:${minute}:${second}`
            this.date = `${year}-${month}-${day}`
        },
        getYear(val) {
          this.selectYear = val
          this.queryPlanListByeardp(val)
        },
        backVillage(val){ //返回村打点
          if(val===0){
            if(this.selectYear){
               this.queryPlanListByeardp(this.selectYear)
            }else{
               this.queryPlanListByeardp(this.defaultYear)
            }
          }else{
            return
          }
        },
        getMapPonit(val){ //  切换企业点或者果园点
          if(val==="company"){
             this.querySubjectCoordinateListdp().then(()=>{
                this.GetMaps('company')
             })
          }
          if(val==="garden"){
             this.queryOrchardCoordinateListdp().then(()=>{
                this.GetMaps('garden')
             })
          }
        },
        GetMaps (type) {
           if(!this.map){
            let T = window.T;
            this.map = new T.Map('mapDiv'); // div的id
           }
          // //允许鼠标双击放大地图
          this.map.enableScrollWheelZoom();
          //设置显示地图的中心点和级别
          this.map.clearOverLays();
          this.map.centerAndZoom(new T.LngLat(120.188520,30.473460), 13)
          // 设置地图底色
          this.map.setStyle('block')
          var that = this
          if(type==='company'){ // 企业
             that.timeTicket1 && clearInterval(that.timeTicket1)
             var icon = new T.Icon({
              iconUrl: require(`./assets/location-company.png`),
              iconSize: new T.Point(42, 50),
              iconAnchor: new T.Point(10, 25),
             })
            let markers = this.companyMarker
            for (var i = 0; i < markers.length; i++) {
                var marker = new T.Marker(new T.LngLat(markers[i].longitude, markers[i].latitude), {
                  icon: icon,
                }) 
                // 创建标注
                var conContent = `<div class="company-info-box">
                  <div class="head">
                    <span>企业信息卡</span>
                  </div>
                  <div class="content">
                    <div class="head-img" id="headImg">
                      <img src="${markers[i].mainPicture}" alt="" style="object-fit: cover;">
                    </div>
                    <div style="font-size: 16px; color: #000;padding-bottom:15px">
                      <div style="width:220px;display:flex;justify-content:space-between;font-size:12px">
                       <span class="label">企业名称：</span>
                       <div style="display:flex;align-items:center;justify-content:center;cursor:pointer" onclick="open_dialog('${markers[i].id}')">
                          <div style="color:#0D99C2;margin-left:50px">数智农场</div>
                          <img id="arrow" src="${require('./assets/arrow.png')}" alt="" style="width:6px;height:8px;margin:-2px 0 0 2px">
                       </div>
                      </div>
                      <div>${markers[i].principalName}</div>
                    </div>
                    <div style="font-size: 16px; color: #000;padding-bottom:15px">
                      <span class="label">果园总面积：</span>
                      <div>${markers[i].totalArea}</div>
                    </div>
                    <div style="font-size: 16px; color: #000;padding-bottom:15px">
                      <span class="label">种植果园数：</span>
                      <div>${markers[i].orchardNum}</div>
                    </div>
                    <div style="font-size: 16px; color: #000;padding-bottom:15px">
                      <span class="label">种植枇杷品种：</span>
                      <div>${markers[i].variety}</div>
                    </div>
                    <div style="font-size: 16px; color: #000";padding-bottom:15px">
                      <span class="label">联系方式：</span>
                      <div>${markers[i].contacts}</div>
                    </div>
                   
                  </div>
                </div>`
                var swiper = `<div id="btn" class="carousel-content">
                      <img src="${require('./assets/left.png')}" alt="" style="width:10px;height:20px" onclick="left(${i})">
                      <div class="carousel">
                        <img id="myImage1" src="${markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList.length>1?markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList[1]:markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList[0]}" alt=""  style="width:80px;height:58px">
                        <img id="myImage" src="${markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList[0]}" alt=""  style="width:110px;height:80px">
                        <img id="myImage2" src="${markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList.length>2?markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList[2]:markers[i].imgList&&markers[i].imgList.length&&markers[i].imgList[0]}" alt=""  style="width:80px;height:58px">
                      </div>
                      <img src="${require('./assets/right.png')}" alt="" style="width:10px;height:20px" onclick="right(${i})">
                    </div>`
                var content = markers[i].imgList&&markers[i].imgList.length ? conContent + swiper : conContent
                this.map.addOverLay(marker) // 将标注添加到地图中
                addClickHandler(content, marker, i, markers[i].longitude, markers[i].latitude,markers[i])
                marker.content = content
                markers[i].content = content
            }
            window.left=(val)=>{
              that.imgIndex--
              if (that.imgIndex === -1) {
                that.imgIndex = markers[val].imgList.length-1
              }
              var pre = that.imgIndex-1
              if(pre===-1){
                pre = markers[val].imgList.length - 1
              }
              var next = that.imgIndex+1
              if(next >markers[val].imgList.length-1){
                next = 0
              }
              document.getElementById("myImage").src = (markers[val].imgList)[that.imgIndex]
              document.getElementById("myImage1").src = (markers[val].imgList)[pre]
              document.getElementById("myImage2").src = (markers[val].imgList)[next]
              that.imgTime && clearInterval(that.imgTime)
              getImg(val)
            }
            window.goBIg=(val)=>{
              console.log(val);
            },
            window.right=(val)=>{
              that.imgIndex++
              if (that.imgIndex > markers[val].imgList.length-1) {
                that.imgIndex = 0
              }
              var pre = that.imgIndex-1
              if(pre===-1){
                pre = markers[val].imgList.length - 1
              }
              var next = that.imgIndex+1
              if(next >markers[val].imgList.length-1){
                next = 0
              }
              document.getElementById("myImage").src = (markers[val].imgList)[that.imgIndex]
              document.getElementById("myImage1").src = (markers[val].imgList)[pre]
              document.getElementById("myImage2").src = (markers[val].imgList)[next]
              getImg(val)
            }
            window.getImg=(val)=>{
                that.imgTime && clearInterval(that.imgTime)
                that.imgTime = setInterval(() => {
                that.imgIndex++
                if (that.imgIndex > markers[val].imgList.length-1) {
                  that.imgIndex = 0
                }
                var pre = that.imgIndex-1
                if(pre===-1){
                  pre = markers[val].imgList.length - 1
                }
                var next = that.imgIndex+1
                if(next >markers[val].imgList.length-1){
                  next = 0
                }
                document.getElementById("myImage").src = (markers[val].imgList)[that.imgIndex]
                document.getElementById("myImage1").src = (markers[val].imgList)[pre]
                document.getElementById("myImage2").src = (markers[val].imgList)[next]
                }, 5000);
            }
            function addClickHandler(content, marker, index, lng, lat) {
              marker.addEventListener('click', function (e) {
                console.log(e);
                that.timeTicket && clearInterval(that.timeTicket)
                that.imgTime && clearInterval(that.imgTime)
                openInfo(content, e)
                autoplay()
              })
            }
            function openInfo(content, e,type) {
              if(!type){
                var point = e.lnglat
              }else{
                var point = e
              }
              marker = new T.Marker(point) // 创建标注
              var markerInfoWin = new T.InfoWindow(content, {
                offset: new T.Point(185, 190),
              })
              that.map.openInfoWindow(markerInfoWin, point) // 开启信息窗口
            }
            autoplay()
            // 轮播信息卡
            function autoplay() {
              var count = 1
              var dataLength = that.companyMarker.length - 1
              that.timeTicket && clearInterval(that.timeTicket)
              that.timeTicket = setInterval(function() {
                count++
                if (count > dataLength) {
                  count = 0
                }
                let e = {}
                e.lat = that.companyMarker[count].latitude
                e.lng = that.companyMarker[count].longitude
                openInfo(markers[count].content,e,true)
                that.imgTime && clearInterval(that.imgTime)
                getImg(count)
              }, 15000)
             
            }
            beginStart()
            // 轮播信息卡
            function beginStart() {
              var count = 0
              var dataLength = that.companyMarker.length - 1
                if (count > dataLength) {
                  count = 0
                }
                let e = {}
                e.lat = that.companyMarker[count].latitude
                e.lng = that.companyMarker[count].longitude
                openInfo(markers[count].content,e,true)
            }
          }else if(type==='garden'){  //果园
            that.timeTicket && clearInterval(that.timeTicket)
            that.imgTime && clearInterval(that.imgTime)
            var icon = new T.Icon({
              iconUrl: require(`./assets/location-orchard.png`),
              iconSize: new T.Point(35, 45),
              iconAnchor: new T.Point(10, 25),
             })
             let markers = this.gardenMarker
             for (var i = 0; i < markers.length; i++) {
                var marker = new T.Marker(new T.LngLat(markers[i].longitude, markers[i].latitude), {
                    icon: icon,
                  }) 
                // 创建标注
                var conContent = `<div class="garden-info-box">
                <div class="head">
                  <span>果园信息卡</span>
                </div>
                <div class="content">
                  <div style="padding-bottom:10px">
                    <span class="label">果园名称：</span>
                    <div>${markers[i].orchardName}</div>
                  </div>
                  <div style="padding-bottom:10px">
                    <span class="label">果园面积：</span>
                    <div>${markers[i].totalArea}</div>
                  </div>
                  <div style="padding-bottom:10px">
                    <span class="label">种植枇杷品种：</span>
                    <div>${markers[i].variety}</div>
                  </div>
                  <div style="padding-bottom:10px">
                    <span class="label">所属企业：</span>
                    <div>${markers[i].subjectName}</div>
                  </div>
                  <div style="padding-bottom:10px">
                    <span class="label">果园联系方式：</span>
                    <div>${markers[i].principal}</div>
                  </div>
                  <div class="img">
                    <img src="${markers[i].qrcodeUrl}" alt="">
                  </div>
                </div>
              </div>`
                var content =  conContent 
                this.map.addOverLay(marker) // 将标注添加到地图中
                addClickHandler(content, marker, i, markers[i].longitude, markers[i].latitude)
                marker.content = content
                markers[i].content = content
            }
            function addClickHandler(content, marker, index, lng, lat) {
              marker.addEventListener('click', function (e) {
                openInfo(content, e)
              })
            }
            function openInfo(content, e,type) {
              if(!type){
                var point = e.lnglat
              }else{
                var point = e
              }
              marker = new T.Marker(point) // 创建标注
              var markerInfoWin = new T.InfoWindow(content, {
                offset: new T.Point(185, 190),
              })
              that.map.openInfoWindow(markerInfoWin, point) // 开启信息窗口
            }
            autoplay1()
            // 轮播信息卡
            function autoplay1() {
              var count = 1
              var dataLength = that.gardenMarker.length - 1
              that.timeTicket1 && clearInterval(that.timeTicket1)
              that.timeTicket1 = setInterval(function() {
                count++
                if (count > dataLength) {
                  count = 0
                }
                let e = {}
                e.lat = that.gardenMarker[count].latitude
                e.lng = that.gardenMarker[count].longitude
                openInfo(markers[count].content,e,true)
              }, 15000)
            }
            beginStart1()
            // 轮播信息卡
            function beginStart1() {
              var count = 0
              var dataLength = that.gardenMarker.length - 1
                if (count > dataLength) {
                  count = 0
                }
                let e = {}
                e.lat = that.gardenMarker[count].latitude
                e.lng = that.gardenMarker[count].longitude
                openInfo(markers[count].content,e,true)
            }
          }else{  //村
              that.timeTicket && clearInterval(that.timeTicket)
              that.timeTicket1 && clearInterval(that.timeTicket1)
              that.imgTime && clearInterval(that.imgTime)
              var icon = new T.Icon({
                  iconUrl: require(`./assets/location-village.png`),
                  iconSize: new T.Point(35, 45),
                  iconAnchor: new T.Point(10, 25),
              })
              let markers1 = this.villageMarker
              for (var i = 0; i < markers1.length; i++) {
                var marker1 = new T.Marker(new T.LngLat(markers1[i].longitude, markers1[i].latitude), {
                  icon: icon,
                }) // 创建标注
              var conContent1 = `<div class="info-box">
                <div class="head">
                  <span title="${markers1[i].burgName}-枇杷产业情况">${markers1[i].burgName}-枇杷产业情况</span>
                </div>
                <div class="content">
                  <div style="font-size: 12px; color: #000;padding-bottom:10px">
                  种植面积：${markers1[i].plantArea||0}（亩）
                  </div>
                  <div style="font-size: 12px; color: #000;padding-bottom:10px">
                  鲜果产量：${markers1[i].fruitsOutput||0}（吨）
                  </div>
                  <div style="font-size: 12px; color: #000;padding-bottom:10px">
                  产业产值：${markers1[i].industryProduction||0}（万元）
                  </div>
                  <div style="font-size: 12px; color: #000;padding-bottom:10px">
                  种植果园数：${markers1[i].plantGarden||0}（个）
                  </div>
                  <div style="font-size: 12px; color: #000">
                  种植户人数：${markers1[i].plantPeople||0}（人）
                  </div>
                </div>
              </div>`
              this.map.addOverLay(marker1) // 将标注添加到地图中
              addClickHandler1(conContent1, marker1, i, markers1[i].longitude, markers1[i].latitude)
              marker1.content = conContent
            }
            function addClickHandler1(content, marker, index, lng, lat) {
              marker.addEventListener('click', function (e) {
                openInfo1(content, e)
              })
            }
            function openInfo1(content, e) {
              console.log(e.lnglat);
              var point = e.lnglat
              marker = new T.Marker(point) // 创建标注
              var markerInfoWin = new T.InfoWindow(content, {
                offset: new T.Point(175, 100),
              })
              that.map.openInfoWindow(markerInfoWin, point) // 开启信息窗口
            }
        
          }
        },
      }
}
</script>
<style lang="less" scoped>
.container{
   width: 100%;
  height: 100%;
  position: relative;
    /* 天地图logo */
  /deep/.tdt-control-copyright.tdt-control {
    display: none !important;
  }
  /deep/.tdt-container a.tdt-infowindow-close-button {
    position: absolute;
    right: 0;
    padding:0 !important;
    border: none;
    text-align: center;
    width: 20px;
    height: 20px;
    font: 14px/17px Tahoma,Verdana,sans-serif;
    color: rgba(208, 212, 224, 1);
    text-decoration: none;
    font-weight: 500;
    background: rgba(157, 157, 157, 1);
    border-radius: 50%;
    margin: 5px;
  }
  /deep/ .info-box {
    width: 162px;
    height: 166px;
    border-radius: 3px;
    background: transparent;
      .head {
        width: 100%;
      font-size: 14px;
      font-weight: 600;
      color: #000000;
      padding-top: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    .content {
      width: 168px;
      height: 108px;
      padding: 15px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  /deep/ .tdt-infowindow-content-wrapper,.tdt-infowindow-content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  }
  /deep/ .tdt-infowindow-tip-container {
  display: none;
  }
  /deep/ .company-info-box{
    width: 228px;
    min-height: 450px;
     .head-img{
      text-align: center;
      margin-bottom: 15px;
      img{
        padding: 5px 0;
        width: 220px;
        height: 80px;
      }
    }
    .head{
      padding: 10px 0 10px 0;
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      text-align: center;
    }
    .label{
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
    }
    .img{
      padding: 10px 0;
      text-align: center;
      img{
        width: 100px;
        height: 100px;
      }
    }
  }
  /deep/ .carousel-content{
        margin-top: 20px;
        width: 220px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .carousel{
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        transition:2s;
        #myImage{
          width: 110px;
          height: 80px;
          z-index: 99;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%,-13%);
          transition:2s;
        }
      }
  }
  /deep/ .garden-info-box{
    width: 228px;
    min-height: 424px;
   font-size: 16px;
   font-weight: 400;
   color: rgba(0, 0, 0, 1);
    .head{
      padding: 10px 0 10px 0;
      font-weight: 600;
      color: #000000;
      text-align: center;
    }
    .label{
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
    }
    .img{
      padding: 10px 0;
      text-align: center;
      img{
        width: 100px;
        height: 100px;
      }
    }
  }
  .time-content{
    position: absolute;
    z-index: 99;
    top: 19px;
    right: 40px;
    width: 131px;
    height: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 12px;
    display: flex;
    justify-content: space-between;
  }
  .title-content{
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
     width: 100%;
    height: 10%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0);
     .title{
      width: 451px;
      height: 33px;
      background: url('./assets/title_bg.png') no-repeat;
      background-size: 100% 100%;
    }
    .title-bottom{
      position: absolute;
      top: 39px;
      display: flex;
      align-content: center;
      .title-wenzi{
        width: 310px;
        height: 29px;
        z-index: 1000;
      }
    }
  }
  .platfrom-content{
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translate(-50%);
    z-index: 99;
    border-radius: 6px;
    background: rgba(11, 17, 51, 0.85);
  }
  .price-content{
    position: absolute;
    top: 242px;
    left: 50%;
    transform: translate(-50%);
    z-index: 99;
    border-radius: 6px;
    background: rgba(11, 17, 51, 0.85);
  }
  .video-content{
     position: absolute;
     bottom: 200px;
    left: 460px;
    z-index: 99;
  }
  .select-company{
    position: absolute;
    bottom: 200px;
    right: 460px;
    z-index: 100;
  }
  .left-content{
    position: absolute;
    top: 50px;
    bottom: 40px;
    left: 2%;
    z-index: 99;
    width: 360px;
    border-radius: 6px;
    background: rgba(11, 17, 51, 1);
  }
  .right-content{
    position: absolute;
    top: 50px;
    bottom: 40px;
    right: 2%;
    z-index: 99;
    width: 360px;
    border-radius: 6px;
    background: rgba(11, 17, 51, 1);
  }
  .darkMode {
  background-color: rgba(30, 55, 129, 1);
  background-image: radial-gradient(rgb(43, 85, 211), rgb(43, 85, 211), #1f3886);
}
}
</style>